import React, { Component } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import gltf_bed from  "../../res/bed.gltf"

let scene = null;
let model = null;
let firstUpdateFlag = true;
let point = null;
export function upDataMesh(x=0, y=0, p=1) {
    // 传感部分的水平偏置
    const x_offset = 7.1;
    const y_offset = 0;
    const z_offset = 1.8;
    if(firstUpdateFlag){
        firstUpdateFlag = false;
        const geometry = new THREE.SphereGeometry(2*p);
        const material = new THREE.MeshBasicMaterial({ color: '#ff0000' });
        point = new THREE.Mesh(geometry, material);
        point.position.set(x_offset+x,y_offset+y,z_offset);
        scene.add(point);
    }
    else {
        point.position.set(x_offset+x,y_offset+y,z_offset);
    }

    // 辅助处理范围平面
    // const geometry2 = new THREE.BoxGeometry(16,16,1);
    // const material2 = new THREE.MeshBasicMaterial({ color: '#8d5d5d' });
    // const cube = new THREE.Mesh(geometry2, material2);
    // cube.position.set(x_offset,y_offset,z_offset);
    // scene.add(cube);
}
class MeshSensor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            width: 0,
            height: 0,
            renderer: null,
            camera: null,
        };

        this.handleResize = this.handleResize.bind(this);
    }

    componentDidMount() {
        // 获取容器的宽高
        const width = this.mount.clientWidth;
        const height = this.mount.clientHeight;

        // 创建场景
        scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 15;

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setClearColor('#ffffff');
        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio); // 设置像素比
        this.mount.appendChild(renderer.domElement);

        const ambientLight = new THREE.AmbientLight(0xffffff, 1.0) //光源设置
        ambientLight.position.set(0, 0, 100) //点光源位置
        scene.add(ambientLight) //将光源添加到场景中
        const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
        scene.add( directionalLight );
        // 加载模型
        const loader = new GLTFLoader();
        loader.load('D://merci2.gltf', (gltf) => {
            model = gltf.scene;
            model.position.set(-30, 0, 0);
            model.rotation.set(Math.PI,Math.PI,Math.PI/2);
            scene.add(model);
            // 添加轨道控制器
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.enablePan = true; // 开启平移
            controls.enableZoom = true; // 开启缩放
            controls.enableRotate = true; // 开启旋转
            controls.mouseButtons = {
                LEFT: THREE.MOUSE.ROTATE,
                MIDDLE: THREE.MOUSE.PAN,
            }; // 鼠标左键旋转、中键缩放、右键平移
            this.setState({ controls });
        }, undefined, function ( error ) {
            console.error( error );
        });

        upDataMesh(1,3,0.6);



        // 自适应窗口大小
        window.addEventListener('resize', this.handleResize);

        // 渲染场景
        const renderScene = () => {
            requestAnimationFrame(renderScene);
            // if(model != null) {
            //     model.rotation.x += 0.001; // 旋转模型
            // }
            renderer.render(scene, camera);
        };
        renderScene();

        // 更新状态
        this.setState({
            width:width,
            height:height,
            renderer:renderer,
            camera:camera,
        });
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize() {
        const { width, height, renderer, camera } = this.state;
        console.log(this.state.width)
        this.setState({
            width: this.mount.clientWidth,
            height: this.mount.clientHeight,
        });

        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }

    onDragStart(event) {
        console.log("start")
        event.object.material.opacity = 0.5;
    }

    onDragEnd(event) {
        event.object.material.opacity = 1;
    }
    render() {
        return <div ref={(ref) => (this.mount = ref)} style={{width:'100%',height:'100%'}}/>;
    }
}

export default MeshSensor;
